<template>
	<view>
		<pageHeader  @back='back' :fixed='true' :border='true'>
			<text>设计作品</text>
			<image src="/static/svg/togive.svg"   class="header-right-img" slot="right" @tap="toRelease"></image>
		</pageHeader>
		<view style="margin-top: -14rpx;">
			<template v-for="(item,index) in list">
				<view class="myHomeDesigns" :key='index' v-if="item.examine==0">
					<view class="myHomeDesigns_title">
						<view>审核成功</view>
						<image src="/static/svg/laMore.svg" mode="" @tap="popup_open" data-type='success' :data-index='index'></image>
					</view>
					<homeDesign :message='item' :index='index' :isIndex='true'  @collect='homeDesignCollect' @praise='homeDesignPraise' :examineSucess='true'/>
				</view>
				<view class="myHomeDesigns" :key='index' v-if="item.examine==1">
					<view class="myHomeDesigns_title">
						<view style="color: #F54725;">审核失败<text>原因：{{item.loseContent}}</text></view>
						<image src="/static/svg/laMore.svg" mode="" @tap="popup_open" data-type='fail' :data-index='index'></image>
					</view>
					<homeDesign :message='item' :index='index' :examineIng='true' />
				</view>
				<view class="myHomeDesigns" :key='index' v-if="item.examine==2">
					<view class="myHomeDesigns_title">
						<view style="color: #8ECF6C;" >审核中</view>
					</view>
					<homeDesign :message='item' :index='index'  :examineIng='true'/>
				</view>
			</template>
		</view>
		<uni-load-more status="loading"  v-if="showLoading" style="margin-top: 30rpx;"/>
		<uni-load-more status="noMore" v-if="list.length>0&&!showLoading&&!hasMore"  style="margin-top: 30rpx;"/>
		<view class="noResult" v-if="list.length<=0&&!showLoading">
			<image src="/static/img/none.png" mode=""></image>
			<text>空空如也，赶紧去发布</text>
		</view>
		<view style="height: 30rpx"></view>
		<uni-popup ref="popup" type="bottom">
			<view class="popup_body">
				<view class="popup_body_body" v-if="chooseType=='fail'||chooseType=='success'" @tap='toEdit'>
					<image src="/static/svg/editDesign.svg" mode=""></image>
					<text>编辑</text>
				</view>
				<view class="popup_body_body" @tap="toDeleDesign">
					<image src="/static/svg/deleDesign.svg" mode=""></image>
					<text>删除</text>
				</view>
				<view class="cancel" @tap="popup_cancel" style="border-bottom: 0;">取消</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import urls from "@/common/util/homeArtIndex.js"
	import pageHeader from "@/components/header/header.vue"
	import homeDesign from "@/components/index/homeDesign.vue"
	import uniPopup from "@/components/uni-popup/uni-popup.vue"
	export default {
		components: {pageHeader,homeDesign,uniPopup},
		data() {
			return {
				list:[],
				chooseType:"",
				pageNumber:1,
				showLoading:false,
				hasMore:true,
				index:0
			};
		},
		onShow() {
			this.list=[]
			this.pageNumber=1
			this.hasMore=true
			this.getMessagre()
		},
		onReachBottom(){
			if(this.hasMore){
				this.pageNumber+=1
				this.getMessagre()
			}
		},
		methods: {
			async getMessagre(){
				this.showLoading=true
				let res=await urls.myAddDesign({userId:localStorage.getItem("userId"),page:this.pageNumber,count:4})
				let list=res.data.list
				for(let a=0;a<list.length;a++){
					this.list.push(list[a])
				}
				if(res.data.hasMore==0){
					this.hasMore=false
				}else{
					this.hasMore=true
				}
				this.showLoading=false
			},
			back() {
				uni.navigateBack({
					delta: 1
				})
			},
			toRelease(){
				uni.navigateTo({
					url: '/pages/releaseDesign/releaseDesign'
				})
			},
			popup_open(e){
				this.chooseType=e.currentTarget.dataset.type
				this.index=e.currentTarget.dataset.index
				this.$refs.popup.open()	
			},
			toDeleDesign(){
				this.popup_cancel()
				uni.showModal({
					content: '确定要删除吗？',
					cancelText:'取消',
					confirmText:'确定',
					success:async (res)=> {
						if (res.confirm) {
							let data={},res
							data.designId=this.list[this.index].designId
							data.state=this.list[this.index].examine
							res=await urls.deleteDesDraft(data)
							if(res.code==0){
								this.list.splice(this.index,1)
							}
						}
					}
				})	
			},
			popup_cancel(){
				this.$refs.popup.close()
			},
			toEdit(){
				this.$refs.popup.close()
				if(this.chooseType=='fail'){
					uni.navigateTo({
						url: '/pages/releaseDesign/releaseDesign?isEdit=true&isFail=true&examine='+this.list[this.index].examine+'&id='+this.list[this.index].designId
					})
					return
				}
				uni.navigateTo({
					url: '/pages/releaseDesign/releaseDesign?isEdit=true&isSuccess=true&examine='+this.list[this.index].examine+'&id='+this.list[this.index].designId
				})
			},
			homeDesignCollect(index,isAlready){
				if(!isAlready){
					this.list[index].collection="1"
					this.list[index].collectionNumber-=1
				}else{
					this.list[index].collection="0"
					this.list[index].collectionNumber+=1
				}	
			},
			homeDesignPraise(index,isAlready){
				if(!isAlready){
					this.list[index].zan="1"
					this.list[index].zanNumber-=1
				}else{
					this.list[index].zan="0"
					this.list[index].zanNumber+=1
				}	
			},
		}
	}
</script>

<style lang="scss">
page{
	background-color: #F7F7F7;
}
.header-right-img{
	height: 44rpx;
	width: 44rpx;
	margin-right: 24rpx;
}
.noResult{
	display: flex;
	flex-flow: column;
	align-items: center;
	padding-top: 143rpx;
	image{
		height: 289rpx;
		width: 374rpx;
		display: block;
	}
	text{
		font-size: 30rpx;
		color: #333333;
		letter-spacing: 1rpx;
		margin-top: 60rpx;
	}
}
.myHomeDesigns{
	background-color: #FFFFFF;
	margin-top: 30rpx;
	.myHomeDesigns_title{
		height:78rpx ;
		width: 750rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 26rpx 0 30rpx;
		border-bottom: 1rpx solid #DDDDDD;
		view{
			display: flex;
			align-items: center;
			font-size: 30rpx;
			line-height: 30rpx;
			letter-spacing: 1rpx;
			color:#E3BE1C;
			text{
				font-size: 28rpx;
				line-height: 30rpx;
				margin-left: 30rpx;
				color: #F54725;
			}
		}
		image{
			height:32rpx;
			width: 32rpx;
		}
	}
	/deep/.homeDesign{
		margin-top: 0;
	}
}
.popup_body{
	position: absolute;
	bottom: 43rpx;
	left:25rpx;
	width: 700rpx;
	background-color: #FFFFFF;
	border-radius: 25rpx;
	height: unset!important;
	view{
		width: 100%!important;
		height: 113rpx;
		border-bottom: 1rpx solid #D8D8D8;
		font-size: 34rpx;
		color: #A66354;
		line-height:112rpx ;
		text-align: center;
	}
	.popup_body_body{
		height: 113rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		image{
			height: 32rpx;
			width: 32rpx;
		}
		text{
			font-size: 34rpx;
			color:#A66354 ;
			letter-spacing: 1rpx;
			line-height: 34rpx;
			margin-left: 12rpx;
		}
	}
	.cancel{
		color: #999999;
	}
}
</style>
